<template>
  <div>
    <div v-for="(item, i) in data" :key="i" class="mb2">
      <template v-if="item.type == 'app'">
        <div class="flex flex-wrap">
          <div class="font-bold">{{ item.label }}:</div>
          <div v-for="(item2, k) in item.children" :key="k">{{ item2.label }},</div>
        </div>
      </template>
      <template v-else>
        <div>
          <div class="font-bold">{{ item.label }}:</div>
          <div v-for="(item1, j) in item.children" :key="j">
            <div class="flex flex-wrap">
              <div class="font-bold">{{ item1.label }}: </div>
              <div v-for="(item2, k) in item1.children" :key="k">{{ item2.label }},</div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { permissionsToTree } from '@/seed-application';
  const props = defineProps<{ value: string[] }>()
  const permissions = props.value
  console.log('pppp', permissions)
  const data = permissionsToTree(permissions)
</script>